<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本选择器-2</title>
  <style>
    /* 
      1. 群组选择器（s1,s2,s3）
         作用：将具有相同样式的元素分组，用逗号“,”分隔多个选择器，统一设置样式 
         示例：同时选中 id 为 h、含有p元素的、class 为 p2 的元素，设置文字颜色为 brown 
    */
    #h,
    p,
    .p1
     {
      color: brown;
    }

    /* 2.后代选择器（E 空格F） 选择E元素下所有的F选择器，无论是子元素还是子孙元素 */
/* .u1 li a{
    color: royalblue;
} */

/* 3.子元素选择器（E>F） 选择E元素的直接子元素F */
/*
3.1先找到所有 class="u1" 的元素（你的最外层 <ul class="u1">）。
3.2再从它的直接子元素中挑出所有 <li>（也就是那三个一级列表项）。
3.3最后再挑这些一级 <li> 的直接子元素中的 <a>。
*/
/* .u1>li>a{
    color: blueviolet;
} */

/* 4.相邻兄弟选择器（E+F） 具有相同父元素，选择E后面紧挨着的F元素 */
/*
+和>用法不同，>是一直找到尾部，而+的后面是一个条件
*/
/* 紧跟 .u1 的 <li> 中所有后代 <a> */
/* .u1 + li a{
    color:cadetblue;
} */
/* 紧跟 .u1 的 <li> 中的直接子元素 <a> */
.u1 + li > a{
    color:cadetblue;
}
/* .u1+li{
    color:cadetblue;
} */

/* 5.通用兄弟选择器（E~F）, CSS3新增加一种选择器  具有相同父元素，选择E后面所有的F元素 */
/* .u1~li{
    color: cadetblue;
} */
  </style>
</head>

<body>
  <!-- id 为 h 的 h1 标签，会被群组选择器 #h 选中 -->
  <h1 id="h">今天星期一</h1>
  <p class="p">已经零下了</p>
  <!-- class 为 p2 的 p 标签，会被群组选择器 .p2 选中 -->
  <p class="p2">已经零下了</p>

  <!-- class 为 ul 的无序列表，后代选择器会作用于其内部嵌套元素 -->
  <ul class="u1">
    <li><a>aaaaaaaaaa</a>
      <ul class="u2">
        <li><a>1111111111</a></li>
        <li><a>2222222222</a></li>
        <li><a>3333333333</a></li>
      </ul>
    </li>
    <li><a>bbbbbbbbbb</a></li>
    <li>cccccccccc</li>
</ul>
    <li><a>AAAAAAAAAA</a>
        <div>
        <a>这是后代 a，不是直接子，会被 .u1 + li a 命中，但不会被 .u1 + li > a 命中</a>
       </div>
    </li>
    <li><a>BBBBBBBBBB</a></li>
    <li><a>CCCCCCCCCC</a></li>

</body>

</html>